<template>
    <div>
        <!-- 按钮 -->

        <el-button style="margin:10px 10px" type="primary" icon="el-icon-refresh-right" circle
            @click="getDynamicExtensionProcessList"></el-button>
        <el-button type="primary" @click="add()">添加</el-button>
        <el-table style="width: 100%;" border :data="list">
            <!-- <el-table-column prop="createId" label="名称" align="center">
        </el-table-column> -->
     <!--       <el-table-column prop="memberLevel" label="会员等级" align="center">
                <template slot-scope="{ row, $index }">
                    <div>{{ row.memberLevel == "1" ? 'vip' : 'svip' }}</div>
                </template>
            </el-table-column> -->
            <el-table-column prop="pageName" label="名称" align="center">
            </el-table-column>
            <el-table-column prop="intro" label="任务说明" align="center">
            </el-table-column>
            <el-table-column prop="pageUrl" label="页面路径" align="center">
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="{ row, $index }">
                    <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
                    <el-tooltip content="修改信息" placement="top" slot="reference">
                        <el-button type="primary" icon="el-icon-edit" @click="ubpateBannar(row)"></el-button>
                    </el-tooltip>
                    <el-popconfirm title="是否删除？" icon="el-icon-info" icon-color="red" @confirm="getDelete(row.id)">
                        <el-tooltip content="删除" placement="top" slot="reference">
                            <el-button type="danger" icon="el-icon-delete"></el-button>
                        </el-tooltip>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改对话框  -->
        <el-dialog title="修改" :visible.sync="dialogFormVisible">
            <el-form style="width:80%" :model="tmFrom" :rules="rules" ref="ruleForm">
             <!--   <el-form-item label="会员等级" label-width="100px" prop="memberLevel">
                    <div>{{ tmFrom.memberLevel == 1 ? "vip" : "Svip" }}</div>
                </el-form-item> -->
                <el-form-item label="名称" label-width="100px" prop="pageName">
                    <el-input autocomplete="off" v-model="tmFrom.pageName"></el-input>
                </el-form-item>
                <el-form-item label="任务说明" label-width="100px" prop="intro">
                    <el-input autocomplete="off" v-model="tmFrom.intro"></el-input>
                </el-form-item>
                <el-form-item label="页面路径" label-width="100px" prop="pageUrl">
                    <el-input autocomplete="off" v-model="tmFrom.pageUrl"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="getAddBannerImage" v-if="state">确 定</el-button>
                <el-button type="primary" @click="UpdateBillingRules" v-else>修改</el-button>
            </div>
        </el-dialog>

        <!-- 添加对话框 -->
        <el-dialog title="添加" :visible.sync="dialogFormVisible1">
            <el-form style="width:80%" :model="list1" :rules="rules" ref="ruleForm">
        <!--        <el-form-item label="是否自定义">
                    <el-select v-model="list1.memberLevel" placeholder="请选择是否自定义" prop="memberLevel">
                        <el-option label="vip" value="1"></el-option>
                        <el-option label="svip" value="2"></el-option>
                    </el-select>
                </el-form-item> -->
<!--
                <el-form-item label="会员类型">
                    <el-select v-model="list1.memberLevelName" placeholder="请选择是否自定义" prop="memberLevelName">
                        <el-option label="月卡" value="月卡"></el-option>
                        <el-option label="季卡" value="季卡"></el-option>
                        <el-option label="年卡" value="年卡"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="名称" label-width="100px" prop="pageName">
                    <el-input autocomplete="off" v-model="list1.pageName"></el-input>
                </el-form-item>
                <el-form-item label="任务说明" label-width="100px" prop="intro">
                    <el-input autocomplete="off" v-model="list1.intro"></el-input>
                </el-form-item>
                <el-form-item label="页面路径" label-width="100px" prop="pageUrl">
                    <el-input autocomplete="off" v-model="list1.pageUrl"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="addFrontPageUrlConfiguration">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'frontPageUrlConfiguration',
    data() {

        return {
            //列表数据
            list: [],
            list1: {
                // costMoney: "",
                // memberLevel: "",
                // memberLevelName: "",
                // monthNum: ""
            },
            // 对话框显示与隐藏控制
            dialogFormVisible: false,
            dialogFormVisible1: false,
            // 表单对象
            tmFrom: {},
            // 当前为修改还是添加 修改为false 添加为true
            state: true,
            // 表单验证
            rules: {
                // name: [
                //     { required: true, message: '请输入规则名称', trigger: 'blur' }
                // ],
                // proportion: [
                //     { required: true, message: '请选择计费比列，数字和小数', trigger: 'blur' },
                //     {
                //         transform(value) {
                //             return Number(value);
                //         },
                //         validator(rule, value, callback) {
                //             if (Number.isFinite(value) && value > 0) {
                //                 callback();
                //             } else {
                //                 callback(new Error("请输入类型为数字和小数，并不少于0"));
                //             }
                //         },
                //         trigger: "blur",
                //     }
                // ],
                // intro: [
                //     { required: true, message: '请选择规则简介', trigger: 'blur' }
                // ]
            }

        }
    },
    mounted() {
        this.getFrontPageUrlConfigurationList()
    },

    methods: {

        // 获取页面列表
        async getFrontPageUrlConfigurationList() {
            let res = await this.$API.system.getFrontPageUrlConfigurationList()
            console.log(res, "111")
            this.list = res.data;
        },

        // 取消
        getShow() {
            this.state = true
            this.dialogFormVisible = true
            this.tmFrom = {
                // name: '',
                // proportion: '',
                // intro: ''
            }
        },

        add() {
            this.dialogFormVisible1 = true
        },
        // 刷新
        getDynamicExtensionProcessList() {
            this.getFrontPageUrlConfigurationList()
        },
        // 添加
        getAddBannerImage() {
            console.log(this.getFrontPageUrlConfigurationList());
        },
        // 添加一条会员套餐
        addFrontPageUrlConfiguration() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let res = await this.$API.system.addFrontPageUrlConfiguration(this.list1);
                    this.dialogFormVisible1 = false;
                    this.getFrontPageUrlConfigurationList()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },

        // 点击修改
        ubpateBannar(row) {
            this.state = false
            this.dialogFormVisible = true;
            // 浅拷贝  让tmFrom收到的数据非服务器直接传回的数据
            this.tmFrom = { ...row };
        },
        // 点击修改
        UpdateBillingRules() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let res = await this.$API.system.updateFrontPageUrlConfiguration(this.tmFrom);
                    this.dialogFormVisible = false;
                    this.getFrontPageUrlConfigurationList()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        // 删除
        async getDelete(id) {
            let res = await this.$API.system.deleteFrontPageUrlConfiguration({ id: id });
            this.getFrontPageUrlConfigurationList()

        }
    }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
